<template>
    <div id="edit_menu_1">
        <div class="container">
            <el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" :rules="rules" label-width="100px">
                <div class="wrapper">
                    <div style="display: inline-block; " class="wrapper-left">
                        <el-form-item label="名称：" style="position: relative; margin-bottom:30px" prop="name">
                            <el-input
                                class="w"
                                @input="handleSearchName"
                                v-model="form.name"
                                :disabled="$route.query.e === '1' ? true : false"
                                placeholder="请输入名称"
                            ></el-input>
                            <p
                                style="margin:0;padding:0;font-size:12px;position: absolute;left: 0;bottom: -30px;"
                                :style="{ color: color }"
                            >
                                {{ tips }}
                            </p>
                        </el-form-item>

                        <el-form-item label="标签：" prop="tags">
                            <div class="block">
                                <el-cascader
                                    :show-all-levels="$route.query.e === '1' ? true : false"
                                    :disabled="$route.query.e === '1' ? true : false"
                                    v-model="form.tags"
                                    class="w"
                                    :options="tagList"
                                    :props="{
                                        emitPath: false,
                                        multiple: true,
                                        checkStrictly: true,
                                        value: 'value',
                                        label: 'label',
                                        children: 'children'
                                    }"
                                    placeholder="请选择标签"
                                >
                                    <template slot-scope="{ node, data }">
                                        <!-- <span>{{ data.label.length >= 20 ? data.label.slice(0, 20) + '...' : data.label }}</span> -->
                                        <span>{{ data.label }}</span>
                                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                    </template>
                                </el-cascader>
                            </div>
                        </el-form-item>

                        <el-form-item label="是否精品：">
                            <el-select
                                :clearable="true"
                                v-model="form.excellentFlag"
                                placeholder="请选择歌单类型"
                                class="handle-select mr10 w"
                                :disabled="$route.query.e === '1' ? true : false"
                            >
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="状态：">
                            <el-select
                                :clearable="true"
                                :disabled="$route.query.e === '1' ? true : false"
                                v-model="form.status"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="上线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="上线时间：">
                            <el-date-picker
                                :disabled="$route.query.e === '1' ? true : false"
                                v-model="form.publishTime"
                                type="datetime"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="描述:">
                            <el-input
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.describe"
                                maxlength="2000"
                                show-word-limit
                                rows="5"
                                :disabled="$route.query.e === '1' ? true : false"
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item style="" label="添加歌曲：" v-if="$route.query.e == '0'">
                            <el-input
                                placeholder="歌曲ID"
                                @keyup.native.enter="handleSearch"
                                clearable
                                @clear="setValueNull"
                                v-model="query.ids"
                                class="handle-input mr10"
                                style="float:left;"
                            ></el-input>

                            <el-input
                                placeholder="歌曲名"
                                @keyup.native.enter="handleSearch"
                                clearable
                                @clear="setValueNull"
                                v-model="query.importName"
                                class="handle-input mr10"
                                style="float:left;"
                            ></el-input>

                            <el-input
                                @keyup.native.enter="handleSearch"
                                clearable
                                @clear="setValueNull"
                                v-model="query.actorImportName"
                                placeholder="歌手名"
                                class="handle-input mr10"
                                style="float:left;"
                            ></el-input>

                            <el-input
                                @keyup.native.enter="handleSearch"
                                clearable
                                @clear="setValueNull"
                                v-model="query.albumImportName"
                                placeholder="专辑名"
                                class="handle-input mr10"
                                style="float:left;"
                            ></el-input>
                            <!-- <el-button type="primary" @click="handleShrink" style="" class="handle-btn">添加</el-button> -->
                            <el-button :disabled="disabled" type="primary" @click="handleSearch" style="" class="handle-btn"
                                >搜索</el-button
                            >
                        </el-form-item>
                    </div>
                    <div style="display: inline-block; " class="wrapper-right">
                        <el-form-item label="封面:" prop="src">
                            <div class="upload-file">
                                <!-- <div class="show-img" v-if="query.src"> -->
                                <div class="show-img" v-if="show">
                                    <!-- <img :src="query.src" ref="img" alt="" /> -->
                                    <img :src="avatar" ref="img" alt="" />
                                    <span class="after" @click="removeFile()"
                                        ><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
                                    /></span>
                                </div>
                                <!-- 文件上传按钮 -->
                                <a href="javascript:void(0)" class="btn" v-if="!show">
                                    <span class="add-btn">
                                        <img src="@/assets/img/ico_feedback_add@2x.png" alt="" />
                                    </span>
                                    <input
                                        v-if="$route.query.e == '0'"
                                        type="file"
                                        accept="image/*"
                                        capture="camera"
                                        id="file"
                                        name="file"
                                        @change="upload"
                                    />
                                </a>
                            </div>
                            <p style="paddinng:0; margin:0;text-align:center;">JPG、PNG文件 5M</p>
                        </el-form-item>

                        <el-form-item label="可用渠道：" v-if="$route.query.e == '0'">
                            <el-select v-model="form.channels" class="handle-select mr10 w" clearable multiple>
                                <el-option
                                    v-for="(item, index) in channelList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- 表格部分 -->
            <div class="table">
                <!-- ====================左边================== -->
                <div
                    class="left"
                    :style="{
                        width: shrink === true ? 0 : '49%'
                    }"
                >
                    <el-table
                        v-if="tableData_l.length != 0"
                        :cell-style="{ color: '#666', 'font-size': '14px' }"
                        :data="tableData_l"
                        border
                        resizable
                        ref="multipleTable"
                        :header-cell-style="rowClass"
                    >
                        <el-table-column width="auto" label="ID" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.tblAlbum ? scope.row.tblAlbum.name : '' }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="CP名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.cppName }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="付费价格" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{
                                scope.row.songAuthTerritorie ? scope.row.songAuthTerritorie.priceType : ''
                            }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="授权截止日期" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{
                                scope.row.songAuthTerritorie ? scope.row.songAuthTerritorie.endDateTime : ''
                            }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="有无歌词" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.lrcFlag === 1 ? '有' : '无' }}</template>
                        </el-table-column>

                        <el-table-column label="试听" prop="preview" align="center">
                            <template slot-scope="scope">
                                <!-- <a
                                    v-if="scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0"
                                    @click="handleClick_l($event, scope.row, scope.$index)"
                                    style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                                >
                                    <svg-icon
                                        :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                        :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                                    />
                                </a> -->

                                <a
                                    v-if="scope.row.m3u8Path"
                                    @click="handleClick_l($event, scope.row, scope.$index)"
                                    style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                                >
                                    <svg-icon
                                        :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                        :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                                    />
                                </a>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="添加" align="center" v-if="$route.query.e === '0'">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    :disabled="getAllSongID(tableData_r).includes(scope.row.id)"
                                    size="mini"
                                    @click="handleAdd(scope.$index, scope.row)"
                                    >添加</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination" v-if="$route.query.e == '0' && tableData_l.length != 0">
                        <el-pagination
                            background
                            layout="total,sizes, prev, pager, next, jumper"
                            :page-sizes="[5, 10, 20, 30]"
                            @size-change="handleSizeChange1"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange1"
                        ></el-pagination>
                    </div>
                </div>
                <!-- =======================================右边============================================================================================================================================================ -->
                <p
                    class="subTitle"
                    @click="handleShrink"
                    :style="{
                        color: '#409EFF',
                        cursor: 'pointer',
                        'font-size': '14px'
                    }"
                >
                    歌曲列表:
                </p>
                <div
                    class="right"
                    :style="{
                        width: shrink === true ? '100%' : '49%'
                    }"
                >
                    <!-- <p class="subTitle">歌曲列表:</p> -->
                    <el-table
                        v-if="tableData_r.length != 0"
                        :cell-style="{ color: '#666', 'font-size': '14px' }"
                        :data="tableData_r"
                        border
                        resizable
                        ref="multipleTable"
                        :header-cell-style="rowClass"
                    >
                        <el-table-column width="auto" label="ID" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.albumName }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="CP名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.cppName }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="付费价格" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{
                                scope.row.songAuthTerritorie ? scope.row.songAuthTerritorie.priceType : ''
                            }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="授权截止日期" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{
                                scope.row.songAuthTerritorie ? scope.row.songAuthTerritorie.endDateTime : ''
                            }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="有无歌词" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.lrcFlag === 1 ? '有' : '无' }}</template>
                        </el-table-column>

                        <el-table-column label="试听" prop="preview" align="center">
                            <template slot-scope="scope">
                                <!-- <a
                                    v-if="
                                        (scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0) ||
                                            (scope.row.files && scope.row.files.length > 0)
                                    "
                                    @click="handleClick_r($event, scope.row, scope.$index)"
                                    style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                                >
                                    <svg-icon
                                        :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                        :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                                    />
                                </a> -->
                                <a
                                    v-if="scope.row.m3u8Path"
                                    @click="handleClick_r($event, scope.row, scope.$index)"
                                    style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                                >
                                    <svg-icon
                                        :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                        :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                                    />
                                </a>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="删除" align="center" v-if="$route.query.e === '0'">
                            <template slot-scope="scope">
                                <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="排序" align="center" v-if="$route.query.e === '0'">
                            <template slot-scope="scope">
                                <li
                                    @dragenter="dragenter($event, scope.$index)"
                                    @dragover="dragover($event, scope.$index)"
                                    @dragstart="dragstart(scope.$index)"
                                    draggable
                                    style="list-style:none; margin:0; padding:0; width:100%; height: 100%;display:flex; justify-content: center; cursor:pointer;"
                                >
                                    <span
                                        @click="handleTop(scope.$index, scope.row)"
                                        style="display:inline-block; width:25px; height: 25px; box-sizing: border-box; background: rgb(208 201 217 / 52%); 
                                padding: 2.5px 0 2.5px 0;text-align:center; margin-right:10px;"
                                        ><img style="width:20px; height:20px;" src="@/assets/img/向上.png" alt=""
                                    /></span>
                                    <span
                                        @click="handleBottom(scope.$index, scope.row)"
                                        style="display:inline-block; width:25px; height: 25px; box-sizing: border-box; background: rgb(208 201 217 / 52%); 
                                padding: 2.5px 0 2.5px 0;text-align:center;"
                                        ><img style="width:20px; height:20px;" src="@/assets/img/向下.png" alt=""
                                    /></span>

                                    <!-- <span
                                        
                                        style="display:inline-block; width:25px; height: 25px; box-sizing: border-box; background: rgba(0,0,0,0.1); 
                                padding: 2.5px 0 2.5px 0;text-align:center; cursor:pointer;"
                                        ><img style="width:20px; height:20px;" src="@/assets/img/向下.png" alt=""
                                    /></span> -->
                                </li>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="类型" align="center" v-if="$route.query.e === '1'">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" v-if="scope.row.record === '新增'">{{ scope.row.record }}</el-button>
                                <el-button type="text" class="red" v-if="scope.row.record === '删除'">{{ scope.row.record }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- ======================================= -->
            </div>
            <!-- //表格部分 -->
            <el-row>
                <el-button v-if="$route.query.e == '0'" @click="handleCancel">取消</el-button>
                <el-button
                    v-if="$route.query.e == '0'"
                    :disabled="
                        legals.includes(true) ||
                            checkRequire({
                                name: form.name,
                                tags: form.tags,
                                avatar: avatar
                            })
                    "
                    type="primary"
                    @click="handleSave(1)"
                    >保存</el-button
                >

                <el-button
                    v-if="$route.query.e == '0'"
                    type="primary"
                    :disabled="
                        legals.includes(true) ||
                            checkRequire({
                                name: form.name,
                                tags: form.tags,
                                avatar: avatar
                            })
                    "
                    @click="handleSave(2)"
                    >保存并提交审核</el-button
                >

                <el-button v-if="$route.query.e === '1'" type="primary" @click="handlePass">通过</el-button>
                <el-button v-if="$route.query.e === '1'" @click="handleRefuse">拒绝</el-button>
            </el-row>
        </div>

        <!-- 右边 -->
        <!-- <audio
            ref="audio_r"
            @error="error_r"
            @play="ready_r"
            :src="
                currentRadioStationSong_r.files && currentRadioStationSong_r.files[0]
                    ? currentRadioStationSong_r.files[0].url
                    : '' || (currentRadioStationSong_r.tblSongfiles && currentRadioStationSong_r.tblSongfiles[0] ? currentRadioStationSong_r.tblSongfiles[0].filePath : '')
            "
        ></audio> -->
        <!-- <audio ref="audio_r" @error="error_r" @play="ready_r"></audio> -->
        <!-- 拒绝原因弹出框 -->
        <el-dialog title="备注" :visible.sync="visible" width="30%">
            <el-form ref="reason" :model="reason" label-width="70px">
                <el-form-item label="">
                    <el-input
                        v-model="reason.remark"
                        maxlength="120"
                        show-word-limit
                        type="textarea"
                        :autosize="{ minRows: 10, maxRows: 15 }"
                        placeholder="请填写拒绝原因"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="refuse">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 左边 播放歌词弹出框 -->
        <el-dialog
            :title="playerTitle_l"
            :visible.sync="playerVisible_l"
            width="500px"
            :close-on-click-modal="false"
            :show-close="true"
            @close="handleClose_l"
            aria-label="左边歌词弹出框"
        >
            <scroll :data="[oLrc_l.ms > 0 ? oLrc_l.ms : []]" class="middle-r" ref="lyricList_l">
                <div class="lyric-wrapper">
                    <div v-if="oLrc_l.ms.length > 0">
                        <p
                            ref="lyricLine_l"
                            class="text"
                            :class="{ current: currentLineNum_l === index }"
                            v-for="(line, index) in oLrc_l.ms"
                            :key="index"
                        >
                            {{ line.c }}
                        </p>
                    </div>
                </div>
            </scroll>

            <!-- 进度条 -->
            <div class="progressBar">
                <span class="startTime">{{ timeFormat(currentTime_l) }}</span>
                <el-slider
                    :show-tooltip="true"
                    :format-tooltip="timestepToolTip_l"
                    @change="changecurrentTime_l"
                    @input="onProgressBarChange_l"
                    :style="{}"
                    v-model="currentTime_l"
                    :max="musicAllDuration_l"
                    class="progress"
                    @mousedown.native="isChange_l = true"
                    @mouseup.native="isChange_l = false"
                ></el-slider>
                <span class="endTime">{{ timeFormat(musicAllDuration_l) }}</span>
            </div>
            <div class="btn-audio">
                <!-- 上一首歌曲 -->
                <div @click="prev_l" id="backSong"><span class="iconfont icon-shangyiqu" style="font-size: 20px;"></span></div>
                <!-- 播放与暂停 -->
                <div class="status">
                    <div id="pause" v-show="radioStationPlaying_l" @click="togglePlaying_l_l">
                        <i class="el-icon-video-pause" style="font-size: 40px;"></i>
                    </div>
                    <div id="play" v-show="!radioStationPlaying_l" @click="togglePlaying_l_l">
                        <i class="el-icon-video-play" style="font-size: 40px;"></i>
                    </div>
                </div>
                <!-- 下一首歌曲 -->
                <div @click="next_l" id="nextSong"><span class="iconfont icon-xiayiqu" style="font-size: 20px;"></span></div>
                <!-- 歌词 -->
                <div @click="handleShowLyric_l" id="album"><span style="font-size: 15px;">词</span></div>
            </div>
        </el-dialog>

        <!-- 右边 播放歌词弹出框 -->
        <el-dialog
            :title="playerTitle_r"
            :visible.sync="playerVisible_r"
            width="500px"
            :close-on-click-modal="false"
            :show-close="true"
            @close="handleClose_r"
            aria-label="右边歌词弹出框"
        >
            <scroll :data="[oLrc_r.ms > 0 ? oLrc_r.ms : []]" class="middle-r" ref="lyricList_r">
                <div class="lyric-wrapper">
                    <div v-if="oLrc_r.ms.length > 0">
                        <p
                            ref="lyricLine_r"
                            class="text"
                            :class="{ current: currentLineNum_r === index }"
                            v-for="(line, index) in oLrc_r.ms"
                            :key="index"
                        >
                            {{ line.c }}
                        </p>
                    </div>
                </div>
            </scroll>

            <!-- 进度条 -->
            <div class="progressBar">
                <span class="startTime">{{ timeFormat(currentTime_r) }}</span>
                <el-slider
                    :show-tooltip="true"
                    :format-tooltip="timestepToolTip_r"
                    @change="changecurrentTime_r"
                    @input="onProgressBarChange_r"
                    :style="{}"
                    v-model="currentTime_r"
                    :max="musicAllDuration_r"
                    class="progress"
                    @mousedown.native="isChange_r = true"
                    @mouseup.native="isChange_r = false"
                ></el-slider>
                <span class="endTime">{{ timeFormat(musicAllDuration_r) }}</span>
            </div>
            <div class="btn-audio">
                <!-- 上一首歌曲 -->
                <div @click="prev_r" id="backSong"><span class="iconfont icon-shangyiqu" style="font-size: 20px;"></span></div>
                <!-- 播放与暂停 -->
                <div class="status">
                    <div id="pause" v-show="radioStationPlaying_r" @click="togglePlaying_r_r">
                        <i class="el-icon-video-pause" style="font-size: 40px;"></i>
                    </div>
                    <div id="play" v-show="!radioStationPlaying_r" @click="togglePlaying_r_r">
                        <i class="el-icon-video-play" style="font-size: 40px;"></i>
                    </div>
                </div>
                <!-- 下一首歌曲 -->
                <div @click="next_r" id="nextSong"><span class="iconfont icon-xiayiqu" style="font-size: 20px;"></span></div>
                <!-- 歌词 -->
                <div @click="handleShowLyric_r" id="album"><span style="font-size: 15px;">词</span></div>
            </div>
        </el-dialog>
        <!-- <audio
                :src="currentSong.tblSongfiles && currentSong.tblSongfiles[0] ? currentSong.tblSongfiles[0].filePath : ''"
                ref="audio"
                @error="error"
                @play="ready"
                @canplay="getDuration"
                @timeupdate="updateTime"
                @ended="end"
            ></audio> -->
        <!-- 左边 -->
        <!-- <audio
                ref="audio_l"
                @error="error_l"
                @play="ready_l"
                @canplay="getDuration_l"
                @timeupdate="updateTime_l"
                @ended="end_l"
                :src="
                    currentRadioStationSong_l.tblSongfiles && currentRadioStationSong_l.tblSongfiles[0]
                        ? currentRadioStationSong_l.tblSongfiles[0].filePath
                        : '' || (currentRadioStationSong_l.files && currentRadioStationSong_l.files[0] ? currentRadioStationSong_l.files[0].url : '')
                "
            ></audio> -->
        <audio ref="audio_l" @error="error_l" @play="ready_l" @canplay="getDuration_l" @timeupdate="updateTime_l" @ended="end_l"></audio>

        <!-- <audio
                :src="currentSong.tblSongfiles && currentSong.tblSongfiles[0] ? currentSong.tblSongfiles[0].filePath : ''"
                ref="audio"
                @error="error"
                @play="ready"
                @canplay="getDuration"
                @timeupdate="updateTime"
                @ended="end"
            ></audio> -->
        <!-- 右边 -->
        <audio ref="audio_r" @error="error_r" @play="ready_r" @canplay="getDuration_r" @timeupdate="updateTime_r" @ended="end_r"></audio>
    </div>
</template>

<script>
// import { delete } from 'vue/types/umd';
import { mapGetters, mapMutations } from 'vuex';
import { editmenu_1 } from './mixins/';
import Scroll from 'base/scroll/scroll';
import NProgress from 'nprogress';
import Hls from 'hls.js';
export default {
    name: 'EditMenu_1',
    mixins: [editmenu_1],
    components: {
        Scroll
    },
    computed: {
        ...mapGetters({
            currentRadioStationIndex_r: 'currentRadioStationIndex_r',
            currentRadioStationIndex_l: 'currentRadioStationIndex_l',
            radioStationPlaying_r: 'radioStationPlaying_r',
            radioStationPlaying_l: 'radioStationPlaying_l',
            radioStationPlayList_r: 'radioStationPlayList_r',
            radioStationPlayList_l: 'radioStationPlayList_l',
            currentRadioStationSong_r: 'currentRadioStationSong_r',
            currentRadioStationSong_l: 'currentRadioStationSong_l',

            tagsList: 'tagsList',
            editRadioStationQuery: 'editRadioStationQuery',
            form: 'editRadioStationForm',
            tableData_l: 'editRadioStationTableData_l',
            tableData_r: 'editRadioStationTableData_r',
            pageTotal: 'editRadioStation_1_PageTotal',
            query: 'editRadioStation_1_Query'
        }),
        percent_r() {
            return this.currentTime_r / this.musicAllDuration_r;
        },
        percent_l() {
            return this.currentTime_l / this.musicAllDuration_l;
        }
        // playIcon_() {
        //     console.log(this.radioStationPlaying_r);
        //     return !this.radioStationPlaying_r;
        // }
    },
    data() {
        return {
            disabled: false,
            shrink: true,
            avatar: '',
            show: true,
            musicAllDuration_l: 0,
            musicAllDuration_r: 0,
            currentTime_l: 0,
            currentTime_r: 0,
            currentLineNum_l: 0,
            currentLineNum_r: 0,
            // 歌词对象
            oLrc_l: {
                ti: '', //歌名
                ar: '', //作者
                al: '', //专辑名
                ms: [] //歌词数组 {t:时间，content:歌词}
            },
            oLrc_r: {
                ti: '',
                ar: '',
                al: '',
                ms: []
            },
            playerTitle_l: '',
            playerTitle_r: '',
            playerVisible_l: false,
            playerVisible_r: false,
            isChange_l: false,
            isChange_r: false
        };
    },
    beforeDestroy() {
        console.log('销毁之前');
    },

    watch: {
        // 右边
        radioStationPlaying_r(newPlaying, oldPlaying) {
            console.log(newPlaying);
            this.$nextTick(() => {
                let audio_r = this.$refs.audio_r;
                newPlaying ? audio_r.play() : audio_r.pause();
            });
        },
        // 左边
        radioStationPlaying_l(newPlaying) {
            console.log(newPlaying);
            this.$nextTick(() => {
                let audio_l = this.$refs.audio_l;
                newPlaying ? audio_l.play() : audio_l.pause();
            });
        },
        // 右边
        currentRadioStationSong_r: {
            deep: true,
            immediate: true,
            handler(newSong, oldSong) {
                console.log(newSong, oldSong);
                if (!newSong.id) {
                    return;
                }
                this.getLyric(newSong.id, res => {
                    console.log(this);
                    this.oLrc_r = {
                        ti: '', //歌名
                        ar: '', //作者
                        al: '', //专辑名
                        ms: [] //歌词数组 {t:时间，content:歌词}
                    };
                    if (res.data) {
                        this.initLines_r(res.data.content);
                    }

                    this.setPlayingState_r(true);
                    // this.$refs.audio_r.play();
                    if (Hls.isSupported()) {
                        var hls = new Hls();
                        var _this = this;
                        hls.attachMedia(this.$refs.audio_r);
                        hls.on(Hls.Events.MEDIA_ATTACHED, function() {
                            console.log(newSong.m3u8Path);
                            hls.loadSource(newSong.m3u8Path);
                            hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
                                if (_this.radioStationPlaying_r) {
                                    _this.$refs.audio_r.play();
                                }
                            });
                        });
                    }
                });
            }
        },

        // 左边
        currentRadioStationSong_l: {
            deep: true,
            immediate: true,
            handler(newSong, oldSong) {
                console.log(newSong, oldSong);
                if (!newSong.id) {
                    return;
                }
                this.getLyric(newSong.id, res => {
                    console.log(this);
                    this.oLrc_l = {
                        ti: '', //歌名
                        ar: '', //作者
                        al: '', //专辑名
                        ms: [] //歌词数组 {t:时间，content:歌词}
                    };
                    if (res.data) {
                        this.initLines_l(res.data.content);
                    }

                    this.setPlayingState_l(true);
                    // this.$refs.audio_l.play();
                    if (Hls.isSupported()) {
                        var hls = new Hls();
                        var _this = this;
                        hls.attachMedia(this.$refs.audio_l);
                        hls.on(Hls.Events.MEDIA_ATTACHED, function() {
                            hls.loadSource(newSong.m3u8Path);
                            hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
                                if (_this.radioStationPlaying_l) {
                                    _this.$refs.audio_l.play();
                                }
                            });
                        });
                    }
                });
            }
        },
        $route: {
            immediate: true,
            deep: true,
            handler: function(a, b) {
                console.log(a, b);
                // if (a.path == '/edit/menu_1' && b.path == '/edit/menu') {
                if (a.name == 'EditMenu_1') {
                    this.setPlayingState_r(false);
                    this.setPlayingState_l(false);
                    this.setCurrentIndex_r(-1);
                    this.setCurrentIndex_l(-1);

                    if (this.$route.query.id) {
                        console.log(this.form);
                        if (Object.keys(this.form).length === 0) {
                            // this.form = {};
                            // this.tableData_r = [];
                            // this.tableData_l = [];

                            this.SET_EDIT_RADIO_STATION_TABLEDATA_R([]);
                            this.SET_EDIT_RADIO_STATION_TABLEDATA_L([]);
                            this.getDataById(this.$route.query.id);
                            // 获取渠道
                            this.getChannelList();
                            // 获取标签
                            this.getTagData();
                        }
                    }
                }
            }
        }
    },
    methods: {
        // 左边
        handleClick_l(e, row, index) {
            console.log(e, row, index);
            this.playerVisible_l = true;
            this.playerTitle_l = '歌曲名: ' + row.name + ' 歌手名: ' + row.actors.name;
            this.togglePlaying_l(e, row, index);
        },
        // 右边
        handleClick_r(e, row, index) {
            this.playerVisible_r = true;
            this.playerTitle_r = '歌曲名: ' + row.name + ' 歌手名: ' + row.actors.name;
            this.togglePlaying_r(e, row, index);
        },
        timestepToolTip_l(v) {
            return this.timeFormat(v);
        },
        timestepToolTip_r(v) {
            return this.timeFormat(v);
        },
        changecurrentTime_l() {
            let currentTime = this.musicAllDuration_l * this.percent_l;
            this.$refs.audio_l.currentTime = currentTime; // 保证手指拖动释放后不弹回原位
            this.currentTime_l = currentTime;
            if (!this.radioStationPlaying_l) {
                this.togglePlaying_l_l();
            }
            this.highLight_l();
            this.isChange_l = false;
        },
        changecurrentTime_r() {
            let currentTime = this.musicAllDuration_r * this.percent_r;
            this.$refs.audio_r.currentTime = currentTime; // 保证手指拖动释放后不弹回原位
            this.currentTime_r = currentTime;
            if (!this.radioStationPlaying_r) {
                this.togglePlaying_r_r();
            }
            this.highLight_r();
            this.isChange_r = false;
        },

        timeFormat(interval) {
            interval = interval | 0; // 相当于Math.floor() 向下取整数
            let minute = (interval / 60) | 0; // 相当于Math.floor() 向下取整数 取分钟
            let second = this._pad(interval % 60); // 取秒
            return `${minute}:${second}`;
        },
        _pad(num, n = 2) {
            let len = num.toString().length;
            while (len < n) {
                num = '0' + num;
                len++;
            }
            return num;
        },
        handleShowLyric_l() {},
        handleShowLyric_r() {},
        // 左边
        togglePlaying_l(e, row, index) {
            // 切换图标
            if (row.paused == true) {
                // 先清理右边
                if (this.tableData_r && this.tableData_r.length && this.tableData_r.length > 0) {
                    for (var i = 0; i < this.tableData_r.length; i++) {
                        this.tableData_r[i].paused = true;
                    }

                    // this.tableData_r = [...this.tableData_r];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
                    // let audio_r = this.$refs.audio_r;
                    // audio_r.pause();
                    this.setPlayingState_r(false);
                }

                for (var i = 0; i < this.tableData_l.length; i++) {
                    if (row.id != this.tableData_l[i].id) {
                        this.tableData_l[i].paused = true;
                    }
                }
                row.paused = false;
            } else if (row.paused == false) {
                for (var i = 0; i < this.tableData_l.length; i++) {
                    this.tableData_l[i].paused = true;
                }
            }

            // this.tableData_l = [...this.tableData_l];
            this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
            // 切换图标
            // this.setPlayingState_l(!this.playing);
            this.setPlayingState_l(!row.paused);
            this.setPlayList_l(this.tableData_l);
            this.setCurrentIndex_l(index);
        },
        togglePlaying_l_l() {
            if (!this.songReady_l) {
                // 歌曲没加载好不让点
                return;
            }
            this.setPlayingState_l(!this.radioStationPlaying_l);
        },
        togglePlaying_r_r() {
            if (!this.songReady_r) {
                // 歌曲没加载好不让点
                return;
            }
            this.setPlayingState_r(!this.radioStationPlaying_r);
        },
        // 右边
        togglePlaying_r(e, row, index) {
            console.log(e, row, index, row.paused);
            // let audio = this.$refs.audio_r;
            // 切换图标
            if (row.paused == true) {
                // 先清理左边
                if (this.tableData_l && this.tableData_l.length && this.tableData_l.length > 0) {
                    for (var i = 0; i < this.tableData_l.length; i++) {
                        this.tableData_l[i].paused = true;
                    }
                    // this.tableData_l = [...this.tableData_l];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
                    this.setPlayingState_l(false);
                    // let audio = this.$refs.audio_l;
                    // audio.pause();
                }

                for (var i = 0; i < this.tableData_r.length; i++) {
                    if (row.id != this.tableData_r[i].id) {
                        this.tableData_r[i].paused = true;
                    }
                }
                // 变为播放状态
                row.paused = false;
            } else if (row.paused == false) {
                console.log(row.paused);
                // 全部变为暂停状态
                for (var i = 0; i < this.tableData_r.length; i++) {
                    this.tableData_r[i].paused = true;
                }
            }

            // this.tableData_r = [...this.tableData_r];

            this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
            this.setPlayingState_r(!row.paused);
            this.setPlayList_r(this.tableData_r);
            this.setCurrentIndex_r(index);
        },
        loop_l() {
            this.setPlayList_l([...this.radioStationPlayList_l]); // 触发 currentSong 改变
            this.$refs.audio_l.currentTime = 0;
            this.currentLineNum_l = 0;
            this.playerTitle_l = '歌曲名: ' + this.currentSong.name + ' 歌手名: ' + this.currentSong.actors.name;
            this.setPlayingState_l(true);
            this.tableData_l[0].paused = false;
            // this.tableData_l = [...this.tableData_l];
            this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
        },
        loop_r() {
            this.setPlayList_r([...this.radioStationPlayList_r]); // 触发 currentSong 改变
            this.$refs.audio_r.currentTime = 0;
            this.currentLineNum_r = 0;
            this.playerTitle_r = '歌曲名: ' + this.currentSong.name + ' 歌手名: ' + this.currentSong.actors.name;
            this.setPlayingState_r(true);
            this.tableData_r[0].paused = false;
            // this.tableData_r = [...this.tableData_r];
            this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
        },
        next_l() {
            if (!this.songReady_l) {
                return;
            }

            if (this.radioStationPlayList_l.length === 1) {
                this.loop_l();
                return;
            } else {
                let index = this.currentRadioStationIndex_l + 1;
                console.log(index);
                if (index === this.radioStationPlayList_l.length) {
                    index = 0;
                    this.tableData_l[this.radioStationPlayList_l.length - 1].paused = true;
                    this.tableData_l[index].paused = false;
                    // this.tableData_l = [...this.tableData_l];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
                } else {
                    this.tableData_l[this.currentRadioStationIndex_l].paused = true;
                    this.tableData_l[index].paused = false;
                    // this.tableData_l = [...this.tableData_l];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
                }
                this.$refs.audio_l.currentTime = 0;
                this.currentLineNum_l = 0;

                this.setPlayingState_l(true);
                this.setCurrentIndex_l(index);
                this.playerTitle_l =
                    '歌曲名: ' + this.currentRadioStationSong_l.name + ' 歌手名: ' + this.currentRadioStationSong_l.actors.name;
            }
            this.songReady_l = false;
        },
        next_r() {
            if (!this.songReady_r) {
                return;
            }

            if (this.radioStationPlayList_r.length === 1) {
                this.loop_r();
                return;
            } else {
                let index = this.currentRadioStationIndex_r + 1;
                console.log(index);
                if (index === this.radioStationPlayList_r.length) {
                    index = 0;
                    this.tableData_r[this.radioStationPlayList_r.length - 1].paused = true;
                    this.tableData_r[index].paused = false;
                    // this.tableData_r = [...this.tableData_r];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
                } else {
                    this.tableData_r[this.currentRadioStationIndex_r].paused = true;
                    this.tableData_r[index].paused = false;
                    // this.tableData_r = [...this.tableData_r];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
                }
                this.$refs.audio_r.currentTime = 0;
                this.currentLineNum_r = 0;

                this.setPlayingState_r(true);
                this.setCurrentIndex_r(index);
                this.playerTitle_r =
                    '歌曲名: ' + this.currentRadioStationSong_r.name + ' 歌手名: ' + this.currentRadioStationSong_r.actors.name;
            }
            this.songReady_r = false;
        },
        prev_l() {
            if (!this.songReady_l) {
                return;
            }
            if (this.radioStationPlayList_l.length === 1) {
                this.loop_l();
                return;
            } else {
                let index = this.currentRadioStationIndex_l - 1;
                if (index === -1) {
                    index = this.radioStationPlayList_l.length - 1;
                    this.tableData_l[0].paused = true;
                    this.tableData_l[index].paused = false;
                    // this.tableData_l = [...this.tableData_l];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
                } else {
                    this.tableData_l[this.currentRadioStationIndex_l].paused = true;
                    this.tableData_l[index].paused = false;
                    // this.tableData_l = [...this.tableData_l];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
                }
                this.$refs.audio_l.currentTime = 0;
                this.currentLineNum_l = 0;

                this.setCurrentIndex_l(index);
                this.setPlayingState_l(true);
                this.playerTitle_l =
                    '歌曲名: ' + this.currentRadioStationSong_l.name + ' 歌手名: ' + this.currentRadioStationSong_l.actors.name;
            }
            this.songReady_r = false;
        },
        prev_r() {
            if (!this.songReady_r) {
                return;
            }
            if (this.radioStationPlayList_r.length === 1) {
                this.loop_r();
                return;
            } else {
                let index = this.currentRadioStationIndex_r - 1;
                if (index === -1) {
                    index = this.radioStationPlayList_r.length - 1;
                    this.tableData_r[0].paused = true;
                    this.tableData_r[index].paused = false;
                    // this.tableData_r = [...this.tableData_r];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
                } else {
                    this.tableData_r[this.currentRadioStationIndex_r].paused = true;
                    this.tableData_r[index].paused = false;
                    // this.tableData_r = [...this.tableData_r];
                    this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
                }
                this.$refs.audio_r.currentTime = 0;
                this.currentLineNum_r = 0;

                this.setCurrentIndex_r(index);
                this.setPlayingState_r(true);
                this.playerTitle_r =
                    '歌曲名: ' + this.currentRadioStationSong_r.name + ' 歌手名: ' + this.currentRadioStationSong_r.actors.name;
            }
            this.songReady_r = false;
        },
        onProgressBarChange_l(v) {},
        onProgressBarChange_r(v) {},
        updateTime_l(e) {
            if (this.isChange_l === true) return;
            console.log('updateTime', e.target.currentTime);
            this.currentTime_l = e.target.currentTime;
            this.currentLineNum_l = this.getLineNo_l(this.$refs.audio_l.currentTime);
            this.highLight_l();
            this.currentLineNum_l++;
        },
        updateTime_r(e) {
            if (this.isChange_r === true) return;
            console.log('updateTime', e.target.currentTime);
            this.currentTime_r = e.target.currentTime;
            this.currentLineNum_r = this.getLineNo_r(this.$refs.audio_r.currentTime);
            this.highLight_r();
            this.currentLineNum_r++;
        },
        highLight_r() {
            if (this.currentLineNum_r >= 5) {
                let lineEl = this.$refs.lyricLine_r[this.currentLineNum_r - 4]; // this.$refs.lyricLine_r是p元素数组
                this.$refs.lyricList_r.scrollToElement(lineEl, 1000);
            } else {
                this.$refs.lyricList_r.scrollTo(0, 0, 1000);
            }
        },
        highLight_l() {
            if (this.currentLineNum_l >= 5) {
                let lineEl = this.$refs.lyricLine_l[this.currentLineNum_l - 4]; // this.$refs.lyricLine_l是p元素数组
                this.$refs.lyricList_l.scrollToElement(lineEl, 1000);
            } else {
                this.$refs.lyricList_l.scrollTo(0, 0, 1000);
            }
        },
        getLineNo_r(ct) {
            if (this.oLrc_r.ms.length === 0) {
                return -1;
            }
            if (ct >= parseFloat(this.oLrc_r.ms[this.currentLineNum_r].t)) {
                // 快进
                for (var i = this.oLrc_r.ms.length - 1; i >= this.currentLineNum_r; i--) {
                    // 倒着查找比curT时间小的第一个值
                    if (ct >= parseFloat(this.oLrc_r.ms[i].t)) {
                        return i - 1;
                    }
                }
            } else {
                // 后退
                for (var i = 0; i <= this.currentLineNum_r; i++) {
                    if (ct <= parseFloat(this.oLrc_r.ms[i].t)) {
                        // i-1 不然会导致字幕快一条
                        return i - 1;
                    }
                }
            }
        },
        getLineNo_l(ct) {
            if (this.oLrc_l.ms.length === 0) {
                return -1;
            }
            if (ct >= parseFloat(this.oLrc_l.ms[this.currentLineNum_l].t)) {
                // 快进
                for (var i = this.oLrc_l.ms.length - 1; i >= this.currentLineNum_l; i--) {
                    // 倒着查找比curT时间小的第一个值
                    if (ct >= parseFloat(this.oLrc_l.ms[i].t)) {
                        return i - 1;
                    }
                }
            } else {
                // 后退
                for (var i = 0; i <= this.currentLineNum_l; i++) {
                    if (ct <= parseFloat(this.oLrc_l.ms[i].t)) {
                        // i-1 不然会导致字幕快一条
                        return i - 1;
                    }
                }
            }
        },
        end_l() {
            this.next_l();
        },
        end_r() {
            this.next_r();
        },
        getDuration_l() {},
        getDuration_r() {
            this.musicAllDuration_r = this.$refs.audio_r.duration;
        },
        getDuration_l() {
            this.musicAllDuration_l = this.$refs.audio_l.duration;
        },
        handleClose_l() {
            this.tableData_l[this.currentRadioStationIndex_l].paused = true;
            // this.tableData_l = [...this.tableData_l];
            this.SET_EDIT_RADIO_STATION_TABLEDATA_L([...this.tableData_l]);
            this.setPlayingState_l(false);
            this.setCurrentIndex_l(-1);

            this.currentLineNum_l = 0;
            this.currentTime_l = 0;
            this.$refs.audio_l.currentTime = 0;

            this.oLrc_l = {
                ti: '',
                ar: '',
                al: '',
                ms: []
            };
        },
        handleClose_r() {
            this.tableData_r[this.currentRadioStationIndex_r].paused = true;
            // this.tableData_r = [...this.tableData_r];
            this.SET_EDIT_RADIO_STATION_TABLEDATA_R([...this.tableData_r]);
            this.setPlayingState_r(false);
            this.setCurrentIndex_r(-1);

            this.currentLineNum_r = 0;
            this.currentTime_r = 0;
            this.$refs.audio_r.currentTime = 0;

            this.oLrc_r = {
                ti: '',
                ar: '',
                al: '',
                ms: []
            };
        },
        ready_l() {
            this.songReady_l = true;
        },
        ready_r() {
            this.songReady_r = true;
        },
        error_l() {
            this.songReady_l = true;
        },
        error_r() {
            this.songReady_r = true;
        },
        ...mapMutations({
            setCurrentIndex_r: 'SET_RADIO_STATION_CURRENT_INDEX_R',
            setCurrentIndex_l: 'SET_RADIO_STATION_CURRENT_INDEX_L',
            setPlayingState_r: 'SET_RADIO_STATION_CURRENT_PLAYING_STATE_R',
            setPlayingState_l: 'SET_RADIO_STATION_CURRENT_PLAYING_STATE_L', // 左边
            setPlayList_r: 'SET_RADIO_STATION_CURRENT_PLAYLIST_R',
            setPlayList_l: 'SET_RADIO_STATION_CURRENT_PLAYLIST_L',
            SET_TAGSLIST: 'SET_TAGSLIST',
            SET_EDIT_RADIO_STATION_DATA: 'SET_EDIT_RADIO_STATION_DATA',
            SET_EDIT_RADIO_STATION_PAGETOTAL: 'SET_EDIT_RADIO_STATION_PAGETOTAL',
            SET_EDIT_RADIO_STATION_1_PAGETOTAL: 'SET_EDIT_RADIO_STATION_1_PAGETOTAL',
            SET_EDIT_RADIO_STATION_QUERY: 'SET_EDIT_RADIO_STATION_QUERY',
            SET_EDIT_RADIO_STATION_QUERY_1: 'SET_EDIT_RADIO_STATION_QUERY_1',
            SET_EDIT_RADIO_STATION_FORM: 'SET_EDIT_RADIO_STATION_FORM',
            SET_EDIT_RADIO_STATION_TABLEDATA_R: 'SET_EDIT_RADIO_STATION_TABLEDATA_R',
            SET_EDIT_RADIO_STATION_TABLEDATA_L: 'SET_EDIT_RADIO_STATION_TABLEDATA_L'
        }),
        initLines_r(lrc) {
            if (!lrc) {
                return;
            }
            if (lrc.includes('\r\n')) {
                var lines = lrc.split('\r\n');
            } else if (lrc.includes('\n\r')) {
                var lines = lrc.split('\n\r');
            } else if (lrc.includes('\n')) {
                var lines = lrc.split('\n');
            } else if (lrc.includes('\r')) {
                var lines = lrc.split('\r');
            } else {
                var lines = [lrc];
            }

            console.log(lines);
            for (var i = 0; i < lines.length; i++) {
                var txt = lines[i].trim();
                var subTxt = txt.substring(txt.indexOf('[') + 1, txt.indexOf(']'));
                var subTxtArr = subTxt.split(':');
                console.log(subTxt, subTxtArr);
                if (isNaN(parseInt(subTxtArr[0]))) {
                    this.oLrc_r[subTxtArr[0]] = subTxtArr[1];
                } else {
                    var times = txt.match(/\[(\d+:.+?)\]/g); // 匹配字符串中的日期，返回一个数组
                    for (var j = 0; j < times.length; j++) {
                        var one = times[j].substring(1, times[j].indexOf(']')).split(':');
                        // console.log(one) // => ["05", "18.47"]
                        this.oLrc_r.ms.push({
                            t: (parseInt(one[0]) * 60 + parseFloat(one[1])).toFixed(3),
                            c: txt.substr(txt.lastIndexOf(']') + 1)
                        });
                    }
                }
            }
            var bool = false;
            // 过滤空歌词
            this.oLrc_r.ms = this.oLrc_r.ms.filter(item => {
                if (item.c + '' === '' || item.c + '' === 'null' || item.c + '' === 'undefined' || item.c + '' === 'NaN') {
                    bool = true;
                    return false;
                } else {
                    return true;
                }
            });
            console.log(this.oLrc_r);
            this.oLrc_r.ms.sort(function(a, b) {
                return a.t - b.t;
            });
            console.log(this.oLrc_r);
            if (bool) {
                this.$message.warning({
                    message: '歌词有问题',
                    duration: 2000
                });
            }
        },
        initLines_l(lrc) {
            if (!lrc) {
                return;
            }
            if (lrc.includes('\r\n')) {
                var lines = lrc.split('\r\n');
            } else if (lrc.includes('\n\r')) {
                var lines = lrc.split('\n\r');
            } else if (lrc.includes('\n')) {
                var lines = lrc.split('\n');
            } else if (lrc.includes('\r')) {
                var lines = lrc.split('\r');
            } else {
                var lines = [lrc];
            }

            console.log(lines);
            for (var i = 0; i < lines.length; i++) {
                var txt = lines[i].trim();
                var subTxt = txt.substring(txt.indexOf('[') + 1, txt.indexOf(']'));
                var subTxtArr = subTxt.split(':');
                console.log(subTxt, subTxtArr);
                if (isNaN(parseInt(subTxtArr[0]))) {
                    this.oLrc_l[subTxtArr[0]] = subTxtArr[1];
                } else {
                    var times = txt.match(/\[(\d+:.+?)\]/g); // 匹配字符串中的日期，返回一个数组
                    for (var j = 0; j < times.length; j++) {
                        var one = times[j].substring(1, times[j].indexOf(']')).split(':');
                        // console.log(one) // => ["05", "18.47"]
                        this.oLrc_l.ms.push({
                            t: (parseInt(one[0]) * 60 + parseFloat(one[1])).toFixed(3),
                            c: txt.substr(txt.lastIndexOf(']') + 1)
                        });
                    }
                }
            }
            var bool = false;
            // 过滤空歌词
            this.oLrc_l.ms = this.oLrc_l.ms.filter(item => {
                if (item.c + '' === '' || item.c + '' === 'null' || item.c + '' === 'undefined' || item.c + '' === 'NaN') {
                    bool = true;
                    return false;
                } else {
                    return true;
                }
            });
            console.log(this.oLrc_l);
            this.oLrc_l.ms.sort(function(a, b) {
                return a.t - b.t;
            });
            console.log(this.oLrc_l);
            if (bool) {
                this.$message.warning({
                    message: '歌词有问题',
                    duration: 2000
                });
            }
        },
        async getLyric(id, callback) {
            try {
                let url = '/song/getlrc';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id
                    })
                });
                console.log(res);
                // if (res.code === '3002') {
                //     return;
                // }
                // if (res.code != '0000') {
                //     throw new Error(res.message);
                // }
                // if (res.data) {
                //     callback && callback(res);
                // } else {
                //     this.currentLineNum_r = 0;
                //     this.currentLineNum_l = 0;
                // }
                callback && callback(res);
                this.currentLineNum_r = 0;
                this.currentLineNum_l = 0;
            } catch (err) {
                console.dir(err);
                // 获取歌词失败时
                this.currentLineNum_r = 0;
                this.currentLineNum_l = 0;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        }
    }
};
</script>

<style lang="scss">
#edit_menu_1 {
    .el-table th > .cell {
        white-space: nowrap !important;
    }
    .el-dialog__wrapper[aria-label='右边歌词弹出框'],
    .el-dialog__wrapper[aria-label='左边歌词弹出框'] {
        .el-dialog {
            .el-dialog__header {
                text-align: center;

                .el-dialog__title {
                    font-size: 14px;
                    color: #666;
                    font-weight: bold;
                }
            }
            .el-dialog__body {
                padding: 0 20px 30px;
                .btn-audio {
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    transform: translate(-50%, 0);
                    width: 300px;
                    height: 54px;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .status {
                        cursor: pointer;
                        background: rgba($color: #000000, $alpha: 0.05);
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        &:hover {
                            background: rgba($color: #000000, $alpha: 0.1);
                        }
                        margin: 0 10px 0;
                    }
                    #backSong,
                    #nextSong {
                        cursor: pointer;
                        border-radius: 50%;
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                    }

                    #backSong:hover,
                    #nextSong:hover,
                    #album:hover {
                        color: #ed6566;
                    }
                    #nextSong {
                    }
                    #album {
                        cursor: pointer;
                        margin-left: 10px;
                    }
                }

                .progressBar {
                    width: 100%;
                    height: 70px;
                    line-height: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .startTime {
                        margin-right: 15px;
                    }
                    .progress {
                        width: 200px;
                    }
                    .endTime {
                        margin-left: 15px;
                    }
                }

                .middle-r {
                    display: inline-block;
                    vertical-align: top;
                    width: 100%;
                    height: 400px;

                    overflow: hidden;

                    .lyric-wrapper {
                        width: 80%;
                        margin: 0 auto;
                        overflow: hidden;
                        text-align: center;

                        .text {
                            line-height: 40px;
                            color: rgba(0, 0, 0, 0.5);
                            font-size: 14px;

                            &.current {
                                color: #2ad181;
                            }
                        }
                    }
                }
            }
        }
    }
    .table {
        .u1043_icon,
        .play_icon,
        .pause_icon {
            width: 43px;
            height: 37px;
        }
        width: 100%;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        position: relative;
        .left {
            width: 49%;
        }
        .right {
            width: 49%;
            // position: relative;
            max-height: 627px;
            overflow: auto;
            // .subTitle {
            //     position: absolute;
            //     left: 0;
            //     top: -45px;
            //     color: #666;
            // }
        }
        .subTitle {
            position: absolute;
            // left: 0;
            // top: -45px;
            right: 39%;
            top: -45px;
            color: #606266;
            font-size: 14px;
            // font-weight: bold;
        }
    }

    .el-row {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: right;
    }
    .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        justify-content: center;
        justify-items: center;
        grid-auto-flow: row;
        align-items: flex-start;
        align-content: flex-start;
        .wrapper-left {
            width: 90%;
            // & > div {
            //     &:last-of-type {
            //         width: 110% !important;
            //     }
            // }
        }
        .wrapper-right {
            width: 90%;
            .upload-file {
                background: transparent;
                position: relative;
                box-sizing: border-box;
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: 260px;
                align-items: center;
                align-content: flex-start;
                justify-items: center;
                grid-auto-flow: row;
                margin-bottom: 10px;
                .show-img {
                    width: 250px;
                    height: 250px;
                    position: relative;
                    border-radius: 15px;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 15px;
                        box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
                    }
                    .after {
                        position: absolute;
                        right: -0.26rem;
                        top: -0.26rem;
                        font-size: 1.04rem;
                        width: 1.04rem;
                        height: 1.04rem;
                        line-height: 1.04rem;
                        text-align: center;
                    }
                }
                .btn {
                    border: 1px dashed #666;
                    position: relative;
                    left: 0;
                    display: inline-block;
                    text-align: center;
                    color: #fff;
                    text-decoration: none;
                    width: 250px;
                    height: 250px;
                    border-radius: 15px;
                    .add-btn {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        width: 30px;
                        height: 30px;
                        border-radius: 15px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    #file {
                        opacity: 0;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-radius: 15px;
                    }
                }
            }
        }
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        /* width: 120px; */
        width: 185px;
    }

    .handle-input {
        width: 20%;
        display: inline-block;
    }
    .handle-btn {
        width: 15%;
        float: right;
        margin-left: 10px;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 2px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .w {
        width: 100%;
    }
    .el-cascader-menu {
        max-width: 250px;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        margin: 0 1px !important;
        min-width: 15px !important;
    }
    .el-pagination__jump {
        margin-left: 0;
    }
    .el-dialog__body {
        .el-form {
            .el-form-item {
                .el-form-item__content {
                    // width: 105% !important;
                    margin-left: 0 !important;
                }
            }
        }
    }
}
</style>
